<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刘天平</title>
		<style>
			*{margin: 0;padding: 0;}
			a{text-decoration: none;}
			.city li{list-style-type: none;}
			.head{background-image: url(../../img/小米商城/cms_15005395666416_FgPKd.jpg);
			height: 120px;
			display: block;
			background-position: 50%;}
			.zero{height: 30px; background-color: #333333;}
			.one ul{line-height: 30px;}
			.one li{float: left;padding: 0px 6px;
			 color: #b0b0b0;}
			.one li:hover{color: white;}
			.two ul{margin-right: 20px; line-height: 30px;}
			.two li:hover{color: white;}
			.two li{float:  right; padding: 0px 4px;
			 color:  #b0b0b0;}
			.main{margin: 0 auto; width: 1226px;border: 1px red solid;}
			.child1{height:80px ;border-bottom: 1px green solid;}
			.baby1{float: left;}
			.baby2{float: left;position:relative ;}
			#A li>div{height: 260px;width:1348px ;display:none;font-size:40px;
			z-index:1 ;
			background-color:white ;
			position:absolute ;top: 200px;left:0;}
			.baby3 li{float: left; padding: 0px 15px; color:black;line-height: 80px;}
			.baby3 li:hover{color: crimson;}
		
			.child2{position:relative ;}
			#body1{height:460px ;width:234px;
			float: left;
			background-color:rgba(99,96,92,0.7);}
			#body1 li{padding: 10px 0px 10px 30px;font-size: 14px;color: white;
			line-height: 23px;}
			#body1 li:hover{background-color: #ff6700;}
			#body1 li>div{height: 460px;width: 600px;border: 1px solid;display:none;
			background-color:white ;
			color: black;font-size:40px;
			position: absolute;top: 0;left:235px ;
		
			}
			.body2{height: 460px;
			background:url(xmad_15009492598428_qSuMH.jpg)no-repeat;
				}
				.child3{height: 170px;width: 100%;margin-top: 14px;}
				.child3 div{display:inline-block ;}
				.div1{width: 234px;height: 170px;background-color:#63605C  ;}
		.div2 img{width: 316px;height: 170px;margin: 0px 7px 0 7px;}
		.div3 img{width: 316px;}
		.div4  img{width: 316px;margin-left:6px;}
		</style>
	</head>
	<body>
	<div class="city">
		<div class="head">
		</div>
		<div class="zero">
		<div class="one">	<ul>
				<a href="#"><li>小米商城</li></a>
				<a href="#"><li>MIUI</li></a>
			<a href="#"><li>米聊</li></a>
				<a href="#"><li>游戏</li></a>
				<a href="#"><li>多看阅读</li></a>
				<a href="#"><li>云服务</li></a>
				<a href="#"><li>金融</li></a>
				<a href="#"><li>小米商城移动版</li></a>
				<a href="#"><li>问题反馈</li></a>
				<a href="#"><li>SelectRegin</li></a>
				</ul></div>
		
		<div class="two">
			<ul >
				<a href="#"><li>购物车</li></a>
				<a href="#"><li>消息通知</li></a>
				<a href="#"><li>注册</li></a>
				<a href="#"><li>登录</li></a>
				
			</ul>
		</div>
	</div>
	<div class="main">
	<div class="child1">
		
	<div  class="baby1"><img src="logo.png"/></div>	
	<div   class="baby2"><img src="下载小米动态.gif"/></div>	
	<div  id="A">
		<ul class="baby3">
				<a href="#"><li>小米手机<div>1</div></li></a>
				<a href="#"><li>红米<div>2</div></li></a>
				<a href="#"><li>平板<div>3</div></li></a>
				<a href="#"><li>笔记本<div>4</div></li></a>
				<a href="#"><li>电视<div>5</div></li></a>
				<a href="#"><li>盒子<div>6</div></li></a>
				<a href="#"><li>影音<div>7</div></li></a>
				<a href="#"><li>路由器<div>8</div></li></a>
				<a href="#"><li>智能硬件<div>9</div></li></a>
				<a href="#"><li>服务<div>10</div></li></a>
				<a href="#"><li>社区<div>11</div></li></a>
		 <li><input type="search" name="" id="" value="" /></li>
			</ul>	
	</div>
		<script type="text/javascript">
			var A=document.getElementById("A");
			var lis= A.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].onmouseover=function(){
					console.log(i);
					this.getElementsByTagName("div")[0].style.display="block";
				};
					lis[i].onmouseout=function(){
					this.getElementsByTagName("div")[0].style.display="none";
				};
			}
	</script>
	</div>
	<div class="child2">
		<div id="body1">
		<ul >
				<a href="#"><li>手机电话卡><div  id="body1-0">1</div></li></a>
				<a href="#"><li>笔记本平板><div id="body1-1">2</div></li></a>
				<a href="#"><li>电视 盒子><div  id="body1-2">3</div></li></a>
				<a href="#"><li>路由器 智能硬件><div  id="body1-3">4</div></li></a>
				<a href="#"><li>移动电源 电池 插线板><div id="body1-4">5</div></li></a>
				<a href="#"><li>耳机 音箱><div   id="body1-5">6</div></li></a>
				<a href="#"><li>保护套 贴膜><div id="body1-6">7</div></li></a>
				<a href="#"><li>线材 支架 存储卡><div id="body1-7">8</div></li></a>
				<a href="#"><li>箱包 服饰 鞋 眼镜><div id="body1-8">9</div></li></a>
				<a href="#"><li>米兔 生活周边><div id="body1-9">10</div></li></a>
		</ul>
		</div>
		<script type="text/javascript">
			var body1=document.getElementById("body1");
			var lis= body1.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].onmouseover=function(){
					console.log(i);
					this.getElementsByTagName("div")[0].style.display="block"
				};
					lis[i].onmouseout=function(){
					this.getElementsByTagName("div")[0].style.display="none"
				};
			}
		</script>
		<div class="body2"></div>
	</div>
	<div class="child3">
		<div class="div1"></div>
		<div class="div2"><img src="xmad_14977951260311_AlzsH.jpg"/></div>
		<div class="div3"><img src="xmad_14993367479701_kbMcI.jpg"/></div>
		<div class="div4"><img src="xmad_15008876143703_gOecR.jpg"/></div>
	</div>
	</div>
	</div>
	</body>
</html>
